<style type='text/css'>

.cTABLE, .cTH, .cTD1, .cTD2 {
	border-collapse: collapse;
	border: solid 1px black;
}
.cTH {
	color: #ffffff;
	background-color: #999999;
}
.cTH:hover {
	background-color: #ffff99;
}
.cTD1 {
	background-color: #ffffff;
	white-space: nowrap;
	min-width: 1.5em;
	max-width: 100px;
	overflow: hidden;
}
.cTD2 {
	background-color: #eeeeee;
}
#i1 SPAN {
	font-size: 3em;
	font-family: fantasy;
	text-shadow: 3px 3px 3px silver;
}
#i1 TD:hover {
	overflow-style: marquee;
	overflow: -webkit-marquee;
}

</style>
<div id='i1'><span>why don&apos;t you drop your text-file here ?</span></div>
<script type='text/javascript'>

HTMLTableElement.prototype.sort = function(in_col) {
	var rows = this.rows;
	var start = 1;
	var order = [];
	for (var i = start; i < rows.length; i++) {
		order.push({V : rows.item(i).cells.item(in_col).textContent, I : i});
	}
	order.sort(function(e1, e2) {
		return ((e1.V > e2.V) ? 1 : -1);
	});
	var replace = document.createElement('TABLE');
	for (var i = 0; i < rows.length; i++) {
		var j = (i < start) ? i : order[(i - start)].I;
		replace.appendChild(rows.item(j).cloneNode(true));
	}
	this.innerHTML = replace.innerHTML;
};

var REG_APACHE_LOG = new RegExp('\] ".{3,4} ([^ ]+)');

var cQ = function(in_url) {
	this._iHash = {};
	var match = in_url.match(REG_APACHE_LOG);
	if (match) {
		// apache log
		var url = match[1];
	} else {
		var url = in_url;
	}
	if (url.indexOf('?') == -1) {
		var query = url
	} else {
		var query = (url.split('?'))[1];
	}
	var fields = query.split('&');
	for (var i = 0; i < fields.length; i++) {
		var fv = fields[i].split('=');
		if (fv.length == 2) {
			this._iHash[fv[0]] = fv[1];
		}
	}
	this._cPool._register(this._iHash);
};

cQ.prototype = {
	_cPool : {
		_fields : [],
		_exists : function(in_field) {
			for (var i = 0; i < this._fields.length; i++) {
				if (this._fields[i] == in_field) {
					return true;
				}
			}
			return false;
		},
		_register : function(in_hash) {
			for (var field in in_hash) {
				if (!this._exists(field)) {
					this._fields.push(field);
				}
			}
		}
	},
	dp : function() {
		var disp = '';
		for (var field in this._iHash) {
			disp += field + ' : ' + this._iHash[field] + "\n";
		}
		alert(disp);
	},
	fields : function() {
		return this._cPool._fields;
	},
	hash : function() {
		var list = this.fields();
		var ret = {};
		for (var i = 0; i < list.length; i++) {
			if (this._iHash[list[i]]) {
				ret[list[i]] = this._iHash[list[i]];
			} else {
				ret[list[i]] = '';
			}
		}
		return ret;
	}
};

function tag1(in_e, in_attrs, in_child)
{
	var attr = '';
	for (var prop in in_attrs) {
		attr += ' ' + prop + '="' + in_attrs[prop] + '"';
	}
	return '<' + in_e + attr + '>' + in_child + '</' + in_e + '>';
}

function tag2(in_e, in_class, in_child)
{
	return tag1(in_e, {class : in_class}, in_child);
}

function tag3(in_e, in_attr, in_val, in_child)
{
	return tag1(in_e, {in_attr : in_val}, in_child);
}

String.prototype.trim = function() {
	return this.replace(/^\s+|\s+$/g, '');
}

function row(in_q)
{
	var hash = in_q.hash();
	var row = '';
	for (var field in hash) {
		var val = hash[field].trim();
		if (val) {
			var cls = 'cTD1';
		} else {
			var cls = 'cTD2';
		}
		row += tag2('td', cls, val);
	}
	return row;
}

function sort(in_col)
{
	document.getElementsByTagName('TABLE').item(0).sort(in_col);
}

function dropFile(in_files)
{
	with (new FileReader()) {
		onload = function(e) {
			var urls = e.target.result.split("\n");
			var dat = {};
			for (var i = 0; i < urls.length; i++) {
				if (urls[i]) {
					dat[urls[i]] = new cQ(urls[i]);
				}
			}
			var fields = cQ.prototype.fields();
			var head = ''
			for (var i = 0; i < fields.length; i++) {
				// head += tag2('th', 'cTH', fields[i]);
				head += tag1('th', {class : 'cTH', onclick : 'sort(' + (i + 1) + ')'}, fields[i]);
			}
			var rows = tag2('tr', 'cTR', tag1('th', {class : 'cTH', onclick : 'sort(0)'}, 'url') + head);
			for (var url in dat) {
				rows += tag2('tr', 'cTR', tag2('td', 'cTD1', url) + row(dat[url]));
			}
			document.getElementById('i1').innerHTML = tag2('table', 'cTABLE', rows);
		}
		readAsText(in_files[0]);
	}
}

window.addEventListener('dragover', function(e) {
	e.preventDefault();
}, false);

window.addEventListener('drop', function(e) {
	dropFile(e.dataTransfer.files);
	e.preventDefault();
	e.stopPropagation();
}, false);

</script>
